'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react'; // 1. 导入 useState

// Props 的类型定义保持不变
interface NavItem {
  name: string;
  path: string;
}

interface NavigationProps {
  title: string;
  titleHref?: string;
  navItems: NavItem[];
}

export function Navigation({ title, titleHref = '/', navItems }: NavigationProps) {
  const pathname = usePathname();
  // 2. 添加 state 来控制移动端菜单的显示和隐藏
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // 沿用之前更优的高亮判断逻辑
  const isActive = (path: string) => {
    if (path === '/') {
      return pathname === '/';
    }
    // 对于 /shared-layout/page-one 这样的路径，我们希望在 /shared-layout/* 下都高亮
    // 因此，我们找到它的父路径 /shared-layout
    const basePath = path.substring(0, path.lastIndexOf('/')) || path;
    if (basePath === '/') return false; // 避免与主页冲突
    return pathname.startsWith(basePath);
  };

  return (
    <nav className="bg-gray-800 text-white shadow-lg">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-center h-16">
          <Link href={titleHref} className="text-xl font-bold">
            {title}
          </Link>

          {/* Desktop Navigation (中等屏幕及以上显示) */}
          <div className="hidden md:flex space-x-1">
            {navItems.map((item) => (
              <Link
                key={item.path}
                href={item.path}
                className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                  pathname === item.path // 桌面端可使用精确匹配，或使用 isActive(item.path)
                    ? 'bg-gray-900 text-white'
                    : 'text-gray-300 hover:bg-gray-700 hover:text-white'
                }`}
              >
                {item.name}
              </Link>
            ))}
          </div>

          {/* 3. Mobile menu button (仅在小屏幕显示) */}
          <div className="md:hidden flex items-center">
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"
              aria-controls="mobile-menu"
              aria-expanded={isMenuOpen}
            >
              <span className="sr-only">Open main menu</span>
              {/* 根据 isMenuOpen 状态切换汉堡和关闭图标 */}
              {isMenuOpen ? (
                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              ) : (
                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                </svg>
              )}
            </button>
          </div>
        </div>
      </div>

      {/* 4. Mobile Navigation Menu (根据 isMenuOpen 状态显示或隐藏) */}
      <div className={`${isMenuOpen ? 'block' : 'hidden'} md:hidden`} id="mobile-menu">
        <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
          {navItems.map((item) => (
            <Link
              key={item.path}
              href={item.path}
              className={`block px-3 py-2 rounded-md text-base font-medium ${
                pathname === item.path
                  ? 'bg-gray-900 text-white'
                  : 'text-gray-300 hover:bg-gray-700 hover:text-white'
              }`}
              // 5. 点击链接后关闭菜单
              onClick={() => setIsMenuOpen(false)}
            >
              {item.name}
            </Link>
          ))}
        </div>
      </div>
    </nav>
  );
}